<template>
  <div ref="GroupSetting" class="pt-24 bd-filt-6 bgc-lightgrey">
    <el-radio-group v-model="activeSetting" class="d-flex jc-between al-center ml-24 mb-24">
      <div>
        <el-radio-button label="groupSetting">组合设置</el-radio-button>
        <el-radio-button label="widgetSetting">组件设置</el-radio-button>
      </div>
      <el-button
        v-if="roleInfo.systemAdmin && $parent.$options.name !== 'Group'"
        type="text"
        class="mr-24"
        @click="handleUploadWidget"
        >上传组件</el-button
      >
    </el-radio-group>
    <div v-show="activeSetting === 'groupSetting'" class="pr-24 pb-24">
      <el-form-item label="尺寸"><LayoutSetting v-model="model" :show-lock="false" /></el-form-item>
    </div>
    <div v-show="activeSetting === 'widgetSetting'" :data-group-id="model.id">
      <div v-for="(item, i) in config.component" :key="item.id" class="sub-component-setting">
        <div class="pl-24 t-theme fw-bold">{{ item.label }}</div>
        <component
          :is="item.component"
          v-model="config.component[i]"
          :index="`${index}.config.component.${i}`"
          @click.native.self="onClickSettingItem(i)"
        ></component>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';
  import { generateID, deepClone } from '@/utils';
  import { Basic, H5 } from '../../landingPageWidget/index';
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';

  export default {
    name: 'Group',
    components: {
      ...Basic.settings,
      ...H5.settings,
      LayoutSetting
    },

    model: { prop: 'model' },

    props: {
      index: { type: [Number, String], default: undefined },
      model: { type: Object, default: () => ({}) }
    },
    data() {
      return {
        activeSetting: 'groupSetting'
      };
    },

    computed: {
      ...mapGetters('user', ['roleInfo']),
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      },
      activeSubComponentIndex() {
        return this.model.data.activeSubComponentIndex;
      }
    },
    watch: {
      'model.data.activeSubComponentIndex': async function (value) {
        const $groupSetting = this.$refs['GroupSetting'];
        let top;
        // 取消激活：回到顶部
        if (value === '') {
          if (Array.from($groupSetting.parentNode.classList).includes('sub-component-setting')) return;
          const collapseItems = document.querySelectorAll('#pane-widgetSetting .el-collapse-item');
          const activeCollapseItem = collapseItems[this.index];
          top = activeCollapseItem.offsetTop;
        } else {
          // 滚动至激活子组件
          this.activeSetting = 'widgetSetting';
          await this.$nextTick();
          const $subComponentSettings = $groupSetting.querySelectorAll(
            `[data-group-id='${this.model.id}'] > .sub-component-setting`
          );
          const $activeSubComponentSetting = $subComponentSettings[this.activeSubComponentIndex];
          top = $activeSubComponentSetting.offsetTop;
        }
        const $scroller = document.querySelector('.setting-wrapper .el-tabs__content');
        $scroller.scrollTo ? $scroller.scrollTo({ top, behavior: 'smooth' }) : ($scroller.scrollTop = top);
      }
    },
    methods: {
      ...mapMutations('component', ['DEPRESS_COMPONENT']),
      onClickSettingItem(i) {
        this.model.data.activeSubComponentIndex = i;
      },
      // 组件上传至远程
      handleUploadWidget() {
        const widget = deepClone(this.model);
        widget.cId = generateID();
        this.$EventBus.$emit('hook:UploadDialog', widget);
        this.DEPRESS_COMPONENT();
      }
    }
  };
</script>

<style lang="scss" scoped></style>
